/** { "style":{ "navigationStyle": "custom", "navigationBarTextStyle": "white" }, tabBar:{ index:2, "iconPath":
"/static/common/tabBar/c.png", "selectedIconPath": "/static/common/tabBar/c1.png", "text": "验车" } } */
<template>
	<view class="hh100 pb10">
		<view class="bar" :style="{ height: customBar + 'px' }">
			<view class="page-top plr24" :style="{
					height: customBar - statusBar + 'px',
					top: statusBar + 'px',
					lineHeight: customBar - statusBar + 'px'
				}">
				预约验车
			</view>
		</view>


		<view class="content">
			<xi-list ref="$list" class="bg#f5f5f5" :auto="false" :query="on.query" :pageSize="15">
				<template #top>
					<view class="ww100" :style="{ height: customBar + 'px' }"></view>

					<view class="input-box-base">
						<search-view v-model="keyWord" background="#F5F5F5" @search="search" />
					</view>
				</template>
				<template #default="{ data }">
					<view class="list">
						<view class="item display_flex" v-for="item in data" @click="jumpDetail(item)">
							<image class="item-image flex-shrink" :src="getImage1(item.images)" mode="aspectFill">
							</image>

							<view class="item-info flex_1">
								<view class="top flex-lr-tbc">
									<view class="name text-ellipsis-1">{{item.name}}</view>
									<view class="juli flex-shrink">距离{{item.k_num}}km</view>
								</view>

								<view class="bottom display_flex align-items_flex-end mt32">
									<view class="le flex-shrink">
										<view class="info-l flex-tbc">
											<image class="wh28 flex-shrink" src="__ROOT__/common/images/time-1.png"
												mode="">
											</image>

											<view class="text text-ellipsis-1">{{item.w_name}}
												{{item.stime}}-{{item.etime}}
											</view>
										</view>

										<view class="info-l flex-tbc mt12">
											<image class="wh28 flex-shrink" src="__ROOT__/common/images/place-1.png"
												mode=""></image>

											<view class="text text-ellipsis-1">
												{{item.address}}
											</view>
										</view>
									</view>

									<view class="btn">预约验车</view>
								</view>
							</view>
						</view>
					</view>
				</template>
			</xi-list>
		</view>


		<tabbar name="/pages/main/yanche" :fixed='true' :isShowBaoxian="isShowBaoxian" />
	</view>
</template>
<script setup>
	import searchView from '@/components/searchView.vue';
	import tabbar from '@/components/tabbar.vue'
	import {
		getlocationBase,
		getImage
	} from '@/utils/global.js'
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue';
	const isiPhone = ref('');
	const statusBar = ref('');
	const customBar = ref('');
	const isShowBaoxian = ref(false)
	const getPageInfo = () => {};
	let longitude = uni.getStorageSync('longitude')
	let latitude = uni.getStorageSync('latitude')

	const initPage = () => {
		isiPhone.value = uni.getStorageSync('isiPhone');
		statusBar.value = uni.getStorageSync('statusBar');
		customBar.value = uni.getStorageSync('customBar');
		if (!longitude) {
			getlocationBase((res) => {
				longitude = res.longitude
				latitude = res.latitude
			})
		}

	};

	const $list = ref(null);

	const keyWord = ref('');

	let on = {
		async query(req) {
			let res = await $post('/stores/get_stores', {
				...req,
				lng: longitude,
				lat: latitude,
				keyword: keyWord.value
			});


			const obj = {
				data: res.list
			}
			return obj;
		}
	};

	const jumpDetail = (item) => {
		uni.navigateTo({
			url: '/pages/mendian/mendian/detail?id=' + item.id
		})
	};

	const getImage1 = (images) => {
		return getImage(images)
	}

	const search = () => {

		$list.value.reload();
	}

	Vue.onShow(() => {
		keyWord.value = uni.getStorageSync('keyWord');
		nextTick(() => {
			$list.value.reload();
		});
		initPage();
		const envVersion = uni.getStorageSync('envVersion')

		if (envVersion == 'release') {
			isShowBaoxian.value = true
		} else {
			isShowBaoxian.value = false
			// uni.hideTabBar({
			// 	index: 1
			// })
			// uni.switchTab({
			// 	url: '/pages/index/index'
			// })
		}
	});

	Vue.onHide(() => {
		uni.removeStorageSync('keyWord');
	});
	Vue.onLoad(() => {});
</script>
<style scoped lang="scss">
	.bar {
		width: 100%;
		background-color: #fff;
		position: fixed;
		left: 0;
		top: 0;

		.page-top {
			width: 100%;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #1d2129;
			position: absolute;
			left: 0;
		}
	}

	.input-box-base {
		padding: 14rpx 24rpx;
		background: #fff;
	}

	.list {
		padding: 0 24rpx;
		background-color: #fff;

		.item {
			padding: 28rpx 0 36rpx;

			.item-image {
				width: 168rpx;
				height: 152rpx;
				border-radius: 8rpx;
			}

			.item-info {
				padding-left: 22rpx;

				.top {
					font-family: OPPOSans, OPPOSans;

					.name {
						max-width: 360rpx;
						font-weight: 500;
						font-size: 32rpx;
						color: #292929;
					}

					.juli {
						font-weight: 400;
						font-size: 24rpx;
						color: #7d7d7d;
					}
				}
			}

			.info-l {
				.text {
					max-width: 318rpx;
					font-family: OPPOSans, OPPOSans;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}
			}

			.btn {
				width: 128rpx;
				height: 52rpx;
				background: #348b8a;
				border-radius: 66rpx 66rpx 66rpx 66rpx;
				margin-left: auto;
				font-family: OPPOSans, OPPOSans;
				font-weight: 400;
				font-size: 24rpx;
				color: #ffffff;
				line-height: 52rpx;
				text-align: center;
			}
		}
	}
	
	.content {
		width: 100%;
		height: calc(100% - 170rpx);
	}
</style>